<template>
    <dv-border-box-12 class="center">
           <div class="d-flex" style="margin-left:10px">
            <span>
           <span><i class="iconfont icon-align-left"></i></span>
          </span>
            <span class="fs-xl text mx-2 mt-1" style="font-size:19px;color: #eaedf3;">{{title}}</span>
          </div>
          <dv-capsule-chart
            :config="config"
            id="bar-chart"
          />
    </dv-border-box-12>
  </template>
  
  <script>
  import { defineComponent, reactive, onMounted } from "vue";
  export default defineComponent({
    components: {
    },
      props: {
      title: {
        type: String,
        default: "",
      },
    },
    setup() {
      //初始化数据
      const config = reactive({
        data: [
        {
          name: "角膜异物剔除",
          value: 13,
        },
        {
          name: "角膜刮片",
          value: 1,
        },
        {
          name: "麦粒肿切开术",
          value: 0,
        },
        {
          name: "球旁注射",
          value: 8,
        },
        {
          name: "眼压(NCT)",
          value: 663,
        },
        {
          name: "泪道冲洗",
          value: 135,
        },
        {
          name: "泪液分泌",
          value: 98,
        },
        {
          name: "睑板腺按摩",
          value: 92,
        }
      ],
      rowNum:7,
        showValue: true
      });
      onMounted(() => {
      });
      // 设置数据
      return {
        config,
      };
    },
  });
  </script>
  
  <style lang="scss" scoped>
  .center {
    display: flex;
    flex-direction: column;
     height:100%;
    .d-flex
    {
     margin-top:4%;
    }
    #bar-chart
    {
    font-size:10px;
    width:90%;
    height:90%; 
    //margin-left: 5px;
    }
  }
  </style>
  